<template>
    <div class="page-work-sign">
        <div class="sign-slogan">
            <!-- <img src="../../assets/img/sign_slogan.png" height="450"> -->
        </div>

        <div class="sign-panel">
            <div class="content">
                <div class="form-logo">
                    <img src="../../assets/img/sign_logo.png" alt="">
                </div>
                <el-form 
                    :model="signForm" 
                    :rules="signRule" 
                    ref="signForm" 
                    class="form-area">
                    <div :class="{isLogin: !isReg}">
                        <el-form-item>
                            <el-input v-model="signForm.mobile" placeholder="请输入常用手机号"></el-input>
                        </el-form-item>
                        <el-form-item class="sms-input">
                            <el-input v-model="signForm.code" placeholder="请输入短信验证码">
                                <el-button slot="append" :disabled="disableSms" @click="getSmsCode($event)" class="get-sms-code">获取短信验证码</el-button>
                            </el-input>
                        </el-form-item>
                    </div>
                    <template v-if="isReg">
                        <el-form-item>
                            <el-select v-model="signForm.role" style="width:100%;" placeholder="请选择身份类型">
                                <el-option label="设计师" :value="1">设计师</el-option>
                                <el-option label="设计师及顾问" :value="3">设计师及顾问</el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="signForm.nickName" placeholder="请输入您的昵称"></el-input>
                        </el-form-item>
                        <el-form-item class="agree-item">
                            <el-switch v-model="agree"></el-switch> 
                            我已阅读并同意
                            <span class="license-link" @click="licenseVisible = true">《约个设计网服务协议》</span>
                        </el-form-item>
                    </template>
                    <el-form-item>
                        <el-button
                            v-if="isReg"
                            :disabled="!submitAble" 
                            class="btn-submit"
                            type="primary"
                            @click="onSign">立即注册</el-button>
                        <el-button
                            v-else
                            class="btn-submit"
                            type="primary"
                            @click="onSign">登录</el-button>
                    </el-form-item>
                </el-form>
                <div class="toggle-mode" @click="isReg = !isReg">
                    {{toggleText}}
                </div>
            </div>
        </div>

        <el-dialog 
            :visible.sync="licenseVisible"
            center
            title="约个设计网服务协议" 
            width="70%"
            top="5%">
            <app-license></app-license>
        </el-dialog>
    </div>
</template>

<script>
import { smscode, sign } from '../../api/user'
import appLicense from './license'
export default {
    components: {
        appLicense
    },
    data(){
        return {
            isReg: true, // false:登录 true:注册
            signForm:{
                mobile: '',
                code: '',
                role: '',
                nickName: ''
            },
            signRule: {
                mobile: [{required: true, message: '请输入', trigger: 'blur' }],
                code: [{required: true, message: '请输入', trigger: 'blur' }],
                role: [{required: true, message: '请选择', trigger: 'change' }],
                nickName: [{required: true, message: '请输入', trigger: 'blur' }],
            },
            agree: false,
            smsCountDown: 60, // 短信重发倒计时
            licenseVisible: false,
        }
    },
    computed: {
        submitAble(){
            return this.agree
        },
        disableSms() {
            return !(/^1[34578]\d{9}$/.test(this.signForm.mobile))
        },
        toggleText(){
            return this.isReg ? '已有账号，马上登录' : '还没有账号，立即注册'
        }
    },
    methods: {
        /**
         * 获取短信验证码
         * @param  {[event]}
         */
        getSmsCode(evt) {
            let el = evt.target
            const self = this
            if(self.smsCountDown === 60){
                smscode({
                    smsType: '1',
                    phoneNumber: self.signForm.mobile
                }).then(rsp => {
                    if(rsp.code === 200){
                        let loop = setInterval(() => {
                            if(self.smsCountDown === 0){
                                clearInterval(loop)
                                el.classList.remove('disabled')
                                el.textContent = '获取短信验证码'
                                self.smsCountDown = 60
                                return false   
                            }
                            el.classList.add('disabled')
                            el.textContent = self.smsCountDown+'秒后重新获取'
                            self.smsCountDown--
                        }, 1000)

                        self.$message.success('短信发送成功')
                    }
                })
            }
        },

        /**
         * 注册 | 登录
         */
        onSign(){
            const data = this.isReg ? Object.assign({}, this.signForm) : {code: this.signForm.code, mobile: this.signForm.mobile}
            sign(data).then(rsp => {
                if(rsp.code === 200){
                    const msg = this.isReg ? '注册成功' : '登录成功'
                    localStorage.userInfo = JSON.stringify(rsp.data)
                    localStorage.userQrcode = rsp.data.qrUrl
                    localStorage.designerId = rsp.data.id
                    this.$message.success(msg)
                    this.$router.push({name: 'myBook'})
                }
            })
        }
    }
}
</script>


<style lang="less">
.page-work-sign{
    overflow: hidden;
    height: 100%;
    background: url(../../assets/img/sign_bg2.png) 100% 0 no-repeat;
    background-size: 100% 100%;

    .license-link{
        color: @primary;
        cursor: pointer;
    }
    .sign-slogan{
        // height: 30%;
        // position: absolute;
        // top: 25%;
        // left: 6%;
        // transform: translateY(-50%);
    }

    .sign-panel{
        position: fixed;
        top: 45%;
        right: 10%;
        transform: translateY(-50%);
        
        .content{
            padding: 30px 100px;
            border-radius: 10px;
            box-shadow: 0 5px 25px lighten(#3c61c0, 10%);
            background-color: #f8faff;
            .toggle-mode{
                padding: 10px 0;
                text-align: right;
                font-size: 12px;
                color: #333;
                cursor: pointer;
                user-select: none;
            }
            .form-logo{
                text-align: center;
                // background-color: #000;
                & > img{
                    display: block;
                    margin: 0 auto 20px;
                    height: 50px;
                }
            }
            .form-area{
                width: 300px;
                .isLogin{
                    padding: 30px 0;
                    .el-form-item{
                    }
                }
                .el-input{
                    background: none;
                    .el-input__inner{
                        padding-left: 20px;
                        padding-right: 20px;
                        border-radius: 20px;
                        background: none;
                    }
                }
                .sms-input{
                    .el-input{
                        .el-input__inner{
                            border-radius: 20px 0 0 20px;
                        }
                        .el-input-group__append{
                            padding: 0;
                            border-radius: 0 20px 20px 0;
                            .el-button{
                                display: block;
                                width: 100%;
                                margin: 0;
                                border: none;
                                border-radius: 0 20px 20px 0;
                                color: #fff;
                                background-color: @primary;
                                &:disabled, &.disabled{
                                    color: #fff;
                                    cursor: not-allowed;
                                    background-color: #ccc;
                                }
                            }
                        }
                    }
                }

                .agree-item .el-form-item__content{
                    font-size: 12px;
                    .el-switch{
                        margin-top: -4px;
                    }
                }
                
                .btn-submit{
                    display: block;
                    width: 50%;
                    margin: 5px auto 0;
                    border-radius: 20px;
                }
            }
        }
    }
}
</style>
